<template>
  <page-form-item
    class="custom-form-item"
    :class="{ 'label-extra-left': record.sourceId }"
    :label="label"
    size="1"
    :field="field"
    :rules="rules"
    label-component="div"
    :style="{ marginBottom: marginBottom + 'px' }"
  >
    <!-- 输入框 -->
    <input-number
      :disabled="inputDisabled"
      class="custom-input-number"
      v-model="price"
      v-bind="$attrs"
      :min="0"
      :unit="unit"
      :max="inputNumberMax"
    />
    <slot></slot>
    <!-- label-extra -->
    <template #label-extra>
      <slot name="label-extra">
        <div class="tips" v-if="tips">
          {{ tips }}
        </div>
        <!-- 飞猪展示不支持设置 toolTip -->
        <a-tooltip
          v-if="inputDisabled"
          content="哈啰仅支持针对门店设置手续费，不支持在启程中配置，如需配置前往哈啰-门店中配置"
          position="top"
        >
          <img src="@/assets/price-tip.png" style="width: 16px; height: 16px; margin-left: 4px" />
        </a-tooltip>
      </slot>
    </template>
  </page-form-item>
</template>
<script setup name="sorderConfigPriceFormCell">
  import { computed } from 'vue'
  import { useVModel } from '@vueuse/core'
  import inputNumber from './price-input-number.vue'
  const props = defineProps({
    modelValue: Number,
    label: String,
    field: String,
    record: Object, // 数据源
    unit: String,
    marginBottom: {
      type: Number,
      default: 6,
    },

    priceType: {
      type: String,
      default: 'default',
    },
  })

  const emit = defineEmits(['update:modelValue'])
  const price = useVModel(props, 'modelValue', emit)

  // input 最大值
  const inputNumberMax = computed(() => {
    // 悟空整数位为10位
    if (props.record.sourceId == '2') {
      return 9999999999.99
    } else {
      return 99999999.99
    }
  })

  const inputDisabled = computed(() => {
    // 哈啰 手续费不支持设置
    if (props.record.sourceId == '3' && props.priceType == 'poundageAmount') {
      return true
    }
    return false
  })

  const channelConfig = {
    default: {
      启程: { min: 0, max: 99999999.99 },
      哈啰: { min: 0, max: 99999999.99 },
      悟空: { min: 0, max: 9999999999 },
      携程: { min: 38, max: 99999 },
      飞猪: { min: 11, max: 99999 },
    },
    poundageAmount: {
      启程: { min: 0, max: 99999999.99 },
      哈啰: {},
      悟空: { min: 0, max: 9999999999 },
      携程: { min: 20, max: 99999 },
      飞猪: { min: 1, max: 35 },
    },
  }

  // 当前费用类型的上下限
  const limitConfig = computed(() => {
    const sourceIdName = props.record.sourceIdName
    const config = channelConfig[props.priceType] || channelConfig.default
    return config[sourceIdName]
  })

  // tips 提示
  // 悟空 2
  // 哈啰 3
  // 携程 4
  // 飞猪 5
  const tips = computed(() => {
    if ([4, 5].includes(props.record.sourceId)) {
      return `仅支持${limitConfig.value.min}-${limitConfig.value.max}整数`
    }
    if (props.record.sourceId == 2) {
      return '仅支持整数'
    }
    return ''
  })

  // formItem rule
  const rules = computed(() => {
    return {
      required: false,
      validator: validatorPrice(props.record),
    }
  })

  // 悟空 2
  // 哈啰 3
  // 携程 4
  // 飞猪 5
  const validatorPrice = (item) => {
    // 悟空
    // 整数正则
    const pattern = /^[0-9]\d*$/
    if (item.sourceId == '2') {
      return (value, callback) => {
        if (value && value != null) {
          if (!pattern.test(value)) {
            callback(new Error())
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
    }
    // 携程 || 飞猪
    if (item.sourceId == '4' || item.sourceId == '5') {
      return (value, callback) => {
        if ((value || value == 0) && value != null) {
          if (!pattern.test(value)) {
            callback(new Error())
          } else {
            const config = limitConfig.value
            if (value < config.min || value > config.max) {
              callback(new Error())
            } else {
              callback()
            }
          }
        } else {
          callback()
        }
      }
    }
    return (value, callback) => {
      callback()
    }
  }
</script>
<style lang="less" scoped>
  .custom-form-item {
    :deep(.arco-form-item-wrapper-col) {
      display: block;
    }
    :deep(.arco-form-item-message) {
      display: none;
    }
    :deep(.arco-form-item-message + .arco-form-item-extra) {
      margin-bottom: 0;
    }
    .custom-input-number {
      width: 150px;
    }
  }
  .label-extra-left {
    :deep(.label-extra) {
      flex: 1;
      margin-left: 4px;
      display: flex;
      align-items: center;
    }
  }
  .tips {
    width: 118px;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    color: #86909c;
  }
  // form-item error
  .arco-form-item-status-error .tips {
    color: #f53f3f;
  }
</style>
